<template>
	<view class="task-wrap">
		<view class="scroll-wrap" style="position: relative;">
			<view class="tabContainer" style="margin-bottom: 120px;">
				<!-- 样品列表 -->
				<view class="sample-term-wrap">
					<view class="sample-term" style="border-radius: 16px;padding: 0;">
						<view class="center_between">
							<view class="content center_between">
								<!-- <view class="content" style="margin-right: 10px;text-align: left;">
									的发表分析
								</view> -->
								<u-search :show-action="true" action-text="搜索" :animation="true"
									placeholder="请输入申请人/申请批次" style='width: 100%;' v-model="keyword" :focus="true"
									@search="query" @custom='query' />
							</view>
						</view>
					</view>
					<view class="u-page__item">
						<u-collapse accordion ref="collapse" :arrow="false">
							<u-collapse-item v-for="(item,index) in dataList" :key="index">
								<view slot="title" class="u-page__item__title__slot-title" style="width: 100%;">
									<view class="FactorNav" style="margin: 0;">
										<view class="top_head" style="font-size: 14px;">
											<view class="top_head_nav">
												<text style="width: 80px;">申请批次</text>
												<view class="content font_left" style="width: 180px;color:#193566">
													{{item.useCode}}
												</view>
											</view>
											<view class="top_head_nav" style="margin-top: 8px;">
												<text style="width: 80px;">申领人</text>
												<view class="content font_left" style="width: 180px;color:#193566">
													{{item.createUserName}}
												</view>
											</view>
											<view class="top_head_nav" style="margin-top: 8px;">
												<text style="width: 80px;">项目名称</text>
												<view class="content font_left" style="width: 180px;color:#193566">
													{{item.projectName}}
												</view>
											</view>
										</view>
										<view class="openFactorNav" @click="searchFactor(item,index)" v-cloak>
											查看申请仪器 <u-icon name="arrow-down-fill" style="margin-left: 10px;" />
										</view>

									</view>
								</view>


								<view class="u-collapse-content">

									<view class="sample-term" v-for="(item2,index2) in item.subCheckStandardIds"
										:key="index2" @click="clickItem($event,item,item2)"
										@longpress="bingLongTap($event,item,item2)"
										style="position: relative; margin-top: 0;box-shadow:0 0 0;margin-bottom: 8px;">
										
										<u-modal v-model="deleteo" show-cancel-button="true" @confirm="confirm"
											:content="content"></u-modal>


										<view class="center_between">
											<b style="width: 100px;">仪器名称</b>
											<view class="content center_between">
												<b class="content"
													style="margin-right: 10px;text-align: left;color: #193566;">
													{{item2.name}}
												</b>
											</view>
										</view>
										<view class="center_between" style="margin: 8px 0;">
											<view style="width: 100px;font-size: 12px;">仪器编号</view>
											<view class="content center_between">
												<view class="content" style="margin-right: 10px;text-align: left;">
													{{item2.number}}
												</view>
											</view>
										</view>
										<view class="center_between" style="margin:0 0 8px 0;">
											<view style="width: 100px;font-size: 12px;">放置地点</view>
											<view class="content center_between">
												<view class="content" style="margin-right: 10px;text-align: left;">
													{{item2.position}}
												</view>
											</view>
										</view>
										<view class="center_between">
											<view style="width: 100px;font-size: 12px;">仪器出入库状态</view>
											<view class="content center_between">
												<view class="content" style="margin-right: 10px;text-align: left;">
													<text class="value" v-if="item2.status == '1'">待领用</text>
													<text class="value" v-if="item2.status == '2'">待入库 </text>
													<text class="value" v-if="item2.status == '3'">已出库</text>
												</view>
											</view>
										</view>

										<view class="center_between" style="margin:0 0 8px 0;">
											<view style="width: 100px;font-size: 12px;"></view>
											<u-button :custom-style="customStyle" size="mini" style="font-size: 20px;"
												@click="scanCodeEvent($event,item,item2)">扫码出库</u-button>
										</view>

									</view>
								</view>
							</u-collapse-item>
						</u-collapse>


					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					background: '#193566 !important',
					color: '#fff !important',
				},
				visiable: false,
				// checked: false,
				checkboxVisible: true,
				keyword: '',
				taskId: '',
				dataList: [],
				factorList: [],
				checkedItem: [],
				sampleTaskInfo: {
					projectName: '',
					consignorName: '',
					inspectionName: '',
					sampleCount: '',
					jobId: '',
					inspectionLinker: '',
					singImageUrl: '',
					sampleVos: [],
				},
				id: "",
				useSubId: "",
				content: '',
				deleteo: false,
			}
		},
		onLoad(e) {
			if (e.taskId) {
				this.taskId = e.taskId
			}


			setTimeout(() => {
				this.$nextTick(() => {
					this.$refs.collapse.init()
				})
			}, 1000)
		},
		onShow() {},
		mounted() {
			this.query()
		},
		methods: {
			//复选框选中事件
			checkboxChange(e, item, val) {
				console.log(val)
			},
			//查询
			searchFactor(item, index) {
				item.subCheckStandardIds = item.deviceVos
				console.log(item.subCheckStandardIds)
				this.$forceUpdate()
				this.$refs.collapse.init()
			},
			// 获取
			query() {
				uni.showLoading({
					title: "加载中..."
				})
					console.log("管理员-未领取仪器")
				let _this = this
				let params = {
					fuzzy: this.keyword
				}
				_this.$api.issueApplyList(params,res => {
					if (res.code == 200) {
						console.log(res)
						let arr = res.result
						setTimeout(() => {
							this.$nextTick(() => {
								_this.dataList = arr
								uni.hideLoading()
							})
						})
					}

				})
			},
			
			clickItem(e, item, val) {
				console.log(val)
				console.log("点我干嘛")
				wx.navigateTo({
					url: '/pages/glanceInstruments/index?id=' + val.id + "&disappear=" + 1
				})
			},
			
			/// 长按
			bingLongTap(e, item, val) {
				console.log(val)
				console.log("长按事件被触发")
				this.valuseId = val.useSubId,
				this.content = "确定删除仪器名称为" + val.name
				this.deleteo = true;
			},
			
			
			confirm() {
				console.log("删除")
				console.log(this.valuseId)
				this.$api.deleteApplyDevice({
					useId: this.valuseId
				}, res => {
					console.log(res)
					if (res.code === 200) {
						this.$common.successToShow("删除成功")
						this.query()
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},

			/** 扫码事件**/
			scanCodeEvent(e, item, val) {
				console.log(val)
				this.useSubId = val.useSubId
				wx.scanCode({
					onlyFromCamera: false, //值为 false  既可以使用相机也可以使用相册，  值为true 只能使用相机
					scanType: ['barCode', 'qrCode', 'datamatrix',
						'pdf417'
					], //分别对应 一维码  二维码  DataMatrix码  PDF417条码  
					success: async (res) => { //扫码成功后
						console.log(res)
						console.log(res.result) //所扫码的内容
						// console.log(res.scanType) 所扫码的类型
						// console.log(res.charSet) 所扫码的字符集
						// console.log(res.path) 当所扫的码为当前小程序二维码时，会返回此字段，内容为二维码携带的 path
						// console.log(res.rawData) 原始数据，base64编码
						var string = res.result.split("=")[1]; //分割取出cid
						console.log(string)
						this.id = string
						this.$api.checkDevice({
							deviceId: this.id,
							useSubId: this.useSubId
						}, res => {
							console.log(res)
							if (res.code === 200) {
								wx.navigateTo({
									url: '/pages/claim/index?id=' + this.id
								})
							}else{
								uni.showToast({
									title: res.message,
									icon: 'none',
									duration: 2000
								});
							}
							
						})
	
					},
					fail: (res) => { //扫码失败后
						wx.showToast({
							title: '扫码失败',
							icon: 'loading',
							duration: 1500
						})
					},
				})
			},

		}
	}
</script>

<style scoped>
	uni-page-body {
		height: 100%;
	}

	/deep/ .u-action-active {
		margin-left: 0;
		color: #3879d9;
	}

	.task-wrap {
		background: #F0F2FA;
		height: 100vh;
		display: flex;
		flex-direction: column;

	}


	.scroll-wrap {
		flex: 1;
		overflow: scroll;
		padding-bottom: 50rpx;
	}

	.tabContainer {
		height: auto;
	}

	.signature {
		position: absolute;
		top: 0;
		right: 0;
		width: 167rpx;
		height: 61rpx;
		color: #fff;
		background-color: #193566;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 25rpx;
	}

	.footerBtn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.btn {
		border-radius: 0;
		width: 100%;
		background: #2f3a89;
	}

	.footerBtns {
		display: flex;
		background: #d2dcf8;
		padding: 10rpx 0;
		box-shadow: -1px 0 1px #ccc;
	}

	.dialogBtns {
		position: absolute;
		top: -180rpx;
		left: 0;
		padding: 10rpx 20rpx;
		background: #d2dcf8;
		width: 100%;
		box-shadow: 1px 0px 1px #ccc;
		padding-top: 20rpx;
	}

	.dialogBtn {
		border: 1px solid #eee;
		margin-bottom: 10rpx;
		width: 100%;
		padding: 0;
		font-size: 14px;
		height: 60rpx;
		color: #2f3a89;
		background: #ffda94;
	}

	.leftTabsBtn {
		width: 100%;
		border: 1px solid #fff;
		height: 60rpx;
		font-size: 14px;
		color: #2f3a89;
		background: #d3dcf9;
		box-shadow: 0px 0px 1px 1px #bbb;
	}

	.rightTabsBtn {
		height: 60rpx;
		font-size: 14px;
		background: #2f3a89;
	}

	.rightTabsSingleBtn {
		width: 50%;
		color: #2f3a89;
		height: 60rpx;
		font-size: 14px;
		box-shadow: 1px 1px 3px #ccc;
	}

	.center_between {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.top_head {
		background: #d3dcf9;
		padding: 10px;
	}

	.top_head_nav {
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.content {
		flex: 1;
		text-align: right;
		color: #68696d;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.font_left {
		text-align: left;
	}

	.sample-term-wrap {
		width: calc(100%-70rpx);
		display: flex;
		justify-content: center;
		flex-direction: column;
		/* align-items: center; */
		padding-left: 35rpx;
		padding-right: 35rpx;
	}

	.sample-term {
		/* width: 90%; */
		/* min-height:390rpx; */
		/* height:370rpx; */
		border-radius: 16rpx;
		background: #fff;
		padding: 20rpx;
		box-shadow: 0px 3px 3px 1px rgba(0, 0, 0, 0.16);
		margin-top: 20rpx;
	}

	.FactorNav {
		border-radius: 16rpx;
		box-shadow: 0px 3px 3px 1px rgba(0, 0, 0, 0.16);
		margin-top: 20rpx;
		overflow: hidden;
	}

	.nav_btn {
		position: absolute;
		top: 10rpx;
		right: 0rpx;
	}

	.navSingleBtn {
		height: 50rpx;
		color: #fff;
		font-size: 12px;
		padding: 0 8px;
		background: #2f3a89;
		box-shadow: 1px 1px 3px #ccc;
	}

	.openFactorNav {
		color: #fff;
		padding: 8px 0;
		font-size: 12px;
		text-align: center;
		background: #193566;
	}

	/deep/.u-icon-wrap {
		display: none;
	}

	/deep/.u-collapse-head {
		padding-bottom: 0;
	}

	/deep/.u-collapse-body {
		/* height: auto!important; */
	}
</style>